<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('投诉全量分析')" />
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="analysis-qd-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>选择时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"  value="2019-10-01" name="startTime"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" value="2019-10-24" name="endTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning"  href="/problemDetails"  target="_blank">
                <i class="fa fa-download"></i> 全量明细查询
            </a>
        </div>

        <div style="margin-top: 10px;width: 100%;padding-right: 0px;padding-left: 0px; float: left;">
            <div class="col-sm-6"  style="width:50%;padding-right: 0px; padding-left:0px; border-radius: 6px ">
                <div class="ibox float-e-margins"  style="margin-bottom: 10px" >
                    <div class="ibox-title">
                        <h5>总量分析</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart_ql"  style="width: 100%; height: 400px"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6"  style="width:50% ;padding-right: 0px ">
                <div class="ibox float-e-margins" style="margin-bottom: 10px">
                    <div class="ibox-title">
                        <h5>按渠道分析</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"  style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
             </div>
            </div>

     <div class="col-sm-12 select-table table-striped table-bordered" style="width:100%; margin-top: 0px" >
        <table id="bootstrap-table" ></table>
    </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var datas = [[${@dict.getType('sys_common_status')}]];
    var prefix = ctx + "dataanalysis/qd";
    query();
    function query() {
        var options = {
            url: prefix+"/list",
            sortName: "all_count",
            sortOrder: "desc",
            modalName: "全量分析",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            columns: [
                {
                    field: 'lht',
                    title: '经营单元'
                },
                {
                    field: 'f10010',
                    title: '10010',
                    sortable: true
                },
                {
                    field: 'f10015',
                    title: '10015'
                },
                {
                    field: 'fgxgj',
                    title: '工信管局'
                },
                {
                    field: 'all_count',
                    title: '总量',
                    sortable: true
                }]
        };

        $.table.init(options);
        $.table.search();
        initEcharts();
        initEcharts_ql();
    };

   function  initEcharts() {
       var myChart = echarts.init(document.getElementById("echarts-bar-chart"),'light');
       myChart.showLoading();
       var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
       var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
       var values1=[];    //纵坐标数组（实际用来盛放Y坐标值）
       var values2=[];    //纵坐标数组（实际用来盛放Y坐标值）
       $.ajax({
           type : "post",
           async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
           url : prefix+"/json",    //请求发送到dataActiont处
           data : {startTime:$("#startTime").val(),endTime:$("#endTime").val()},
           dataType : "json",        //返回数据形式为json
           success : function(result) {
               //请求成功时执行该函数内容，result即为服务器返回的json对象
               if (result) {
                   for(var i=0;i<result.length;i++){
                       names.push(result[i].lht);
                       values.push(result[i].f10010);
                       values1.push(result[i].f10015);
                       values2.push(result[i].fgxgj);
                   }
                   myChart.hideLoading();    //隐藏加载动画
                   myChart.setOption({        //加载数据图表
                       tooltip: {},
                       legend: {
                           data:['10010','10015','工信管局']
                       },
                       xAxis: {
                           data: names,
                           axisLabel: {
                               interval:0,
                               rotate:40//角度顺时针计算的
                           }
                       },
                       yAxis: {
                           type: 'value',
                           max:300,
                           splitNumber:5
                       },
                       series: [{
                           // 根据名字对应到相应的系列
                           name: '10010',//薪资 series not exists. Legend data should be same with series name or data name.
                           type: 'bar',
                           stack: "1",
                           data: values
                       },
                           {
                               // 根据名字对应到相应的系列
                               name: '10015',//薪资 series not exists. Legend data should be same with series name or data name.
                               type: 'bar',
                               stack: "1",
                               data: values1
                           },
                           {
                               // 根据名字对应到相应的系列
                               name: '工信管局',//薪资 series not exists. Legend data should be same with series name or data name.
                               type: 'bar',
                               stack: "1",
                               data: values2
                           }]
                   });
               }
           },
           error : function(errorMsg) {
               //请求失败时执行该函数
               alert("图表请求数据失败!");
               myChart.hideLoading();
           }
       });//end ajax
   }

    function  initEcharts_ql() {
        var myChart_ql = echarts.init(document.getElementById("echarts-bar-chart_ql"),'light');
        myChart_ql.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values3=[];    //纵坐标数组（实际用来盛放Y坐标值）
        var nums=[];
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : prefix+"/json",    //请求发送到dataActiont处
            data : {startTime:$("#startTime").val(),endTime:$("#endTime").val()},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].lht);
                        values3.push(result[i].all_count);
                        var obj = new Object();
                        obj.name = result[i].lht;
                        obj.value = result[i].all_count;
                        nums.push(obj);

                    }
                    myChart_ql.hideLoading();    //隐藏加载动画
                    myChart_ql.setOption({        //加载数据图表
                        title : {
                            x:'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)",

                            type:'scroll'
                        },
                        legend: {
                            type: 'scroll',
                            data:names
                        },
                        calculable : true,
                        series: [{

                            name: '经营单元总量',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: nums,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart_ql.hideLoading();
            }
        });//end ajax
    }
    function unlock() {
        $.operate.post(prefix + "/unlock?loginName=" + $.table.selectColumns("loginName"));
    }
</script>
</body>
</html>